<!--
 * @Author: your name
 * @Date: 2021-09-10 09:57:25
 * @LastEditTime: 2021-09-11 22:44:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \backstage-management-system\system\src\views\pm\index.vue
-->
<template>
  <div class="box">
    <div class="select">筛选查询</div>
    <div class="headbox">
      <template>
        <span class="num"> 项目编号：</span
        ><el-select
          v-model="value"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入项目编号"
          :remote-method="remoteMethod"
          :loading="loading0"
        >
          <el-option
            v-for="item in options0"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <template>
        <span class="num"> 项目状态：</span>
        <el-select v-model="value" placeholder="全部">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
    </div>
    <div class="select1"><span>数据列表</span><el-button @click="$router.push('/admin/add')">新增</el-button></div>
    <div class="data-table">
      <template>
        <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="序号" width="120" align="center" ></el-table-column>
        <el-table-column prop="number" label="项目编号" width="120" align="center"></el-table-column>
        <el-table-column prop="designation" label="项目名称" width="120" align="center"></el-table-column>
        <el-table-column prop="name" label="项目负责人" width="120" align="center"></el-table-column>
        <el-table-column prop="current" label="当前阶段" width="120" align="center"></el-table-column>
        <el-table-column prop="state" label="项目状态" width="120" align="center"></el-table-column>
        <el-table-column prop="date" label="开始日期" width="120" align="center"></el-table-column>
        <el-table-column label="操作" width="300" align="center">
            <template slot-scope="prop">
            <el-button type="info" size="mini">跟进</el-button>
            &nbsp;&nbsp;
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="onConfirm(prop.row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
            </el-popconfirm>
            &nbsp;&nbsp;
            <el-button type="success" size="mini" @click="$router.push('/admin/detail' + prop.row.id)">详情</el-button>
            </template>
        </el-table-column>
      </el-table>
      </template>
      <el-pagination @current-change="onPageChange" background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      options0: [],
      value0: [],
      list0: [],
      loading0: false,
      states: [],
      options: [
        {
          value: "选项1",
          label: "进行中",
        },
        {
          value: "选项2",
          label: "已完成",
        },
        {
          value: "选项3",
          label: "已延期",
        },
        {
          value: "选项",
          label: "全部",
        },],
      value: "",
    };
  },
  mounted() {
    this.list0 = this.states.map((item) => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
    this.onPageChange()
  },
  methods: {
     async onPageChange(page = 1) {
      let ret = await this.$store.dispatch('user/getUserList', page)
      this.tableData = ret.data.userData
      console.log(111);
    },
     async onConfirm(row) {
      let ret = await this.$store.dispatch('user/deleteUserAction', row.id)
      if (ret.code === 0) {
        // 更新数据源
        this.tableData = this.tableData.filter((item) => item.id != row.id)
      }
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading0 = true;
        setTimeout(() => {
          this.loading0 = false;
          this.options0 = this.list0.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options0 = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>

.box {
  background-color: #fff;
}
.headbox {
  box-sizing: border-box;
  border: 1px solid #b4b4b4;
  border-top: 0;
  margin: 0 0 0 30px;
  padding: 20px;
  font-size: 12px;
  color: #b4b4b4;
  background-color: #fff;
}
.select {
  margin: 30px 0 0 30px;
  background-color: rgba(242, 242, 242, 1);
  padding: 20px;
}
.select1 {
  margin: 30px 0 0 30px;
  background-color: rgba(242, 242, 242, 1);
  padding:10px 20px;
  display: flex;
  justify-content: space-between;
  line-height: 40px;
}
.el-main {
  overflow: scroll;
}
.data-table {
  margin: 0 0 0 30px;
}
.el-table {
  font-size: 12px;
}
</style>